<script setup>
import ManageMap from "@/components/maps/ManageMap.vue";
import { ref, nextTick } from "vue";
import {
  factoryGetDetailService,
  getPassingAPI,
  getAmountAPI,
  getDosageAPI,
  getContentAPI,
} from "@/api/foulFactory.js";
import { deviceGetListService } from "@/api/device.js";
import { xAxisFormatTime } from "@/utils/format.js";
import DeviceList from "@/components/display/DeviceList.vue";
import AmountChart from "@/components/charts/AmountChart.vue";
import Panel from "@/components/myParts/OperationPanel.vue";
import waterContent from "@/assets/waterContent/content.json";

const props = defineProps({
  factoryId: {
    type: String,
    default: "",
  },
});

// 地图相关子页面刷新
const isMapSonActive = ref(false);
const mapReload = () => {
  isMapSonActive.value = false;
  isMapSonActive.value = true;
  return new Promise((resolve, reject) => {
    resolve();
  });
};
// 水体相关子页面刷新
const isWaterSonActive = ref(false);
const waterReload = () => {
  isWaterSonActive.value = false;
  nextTick(() => {
    isWaterSonActive.value = true;
  });
};

const factoryId = ref("");
const mapRef = ref(null);
const factoryName = ref("");
const geoCenter = ref([]);
const passing = ref(0);
const deviceList = ref([]);
const amount = ref({});
const amountArr = ref([]);
const dosage = ref({});
const dosageArr = ref([]);
let positions = [];
const foulContent = ref({});
const qualityArr = ref([]);
const initData = async () => {
  // 接收
  const res1 = await factoryGetDetailService(factoryId.value);
  let factory = res1.data.data;
  let params = { factoryId: factoryId.value };
  const res2 = await deviceGetListService(params);
  deviceList.value = res2.data.data;
  const res3 = await getPassingAPI(params);
  passing.value = res3.data.data;
  const res4 = await getAmountAPI(params);
  amount.value = res4.data.data;
  const res5 = await getDosageAPI(params);
  dosage.value = res5.data.data;
  const res6 = await getContentAPI(params);
  foulContent.value = res6.data.data;
  // 处理
  factoryName.value = factory.factoryName;
  geoCenter.value = factory.position.split(" ");
  positions[0] = factory.position;
  let j = 0;
  amountArr.value.splice(0, amountArr.value.length);
  for (const key in amount.value) {
    let timeStr = xAxisFormatTime(key);
    let a = {
      time: timeStr,
      value: amount.value[key],
    };
    amountArr.value[j] = a;
    j++;
  }
  let i = 0;
  dosageArr.value.splice(0, dosageArr.value.length);
  for (const key in dosage.value) {
    let timeStr = xAxisFormatTime(key);
    let a = {
      time: timeStr,
      value: dosage.value[key],
    };
    dosageArr.value[i] = a;
    i++;
  }
  // 水质
  let k = 0;
  qualityArr.value.splice(0, qualityArr.value.length);
  for (const key in foulContent.value) {
    let a = {
      key: key,
      value: foulContent.value[key],
      name: waterContent["foul"][key]["name"],
    };
    qualityArr.value[k] = a;
    k++;
  }
  waterReload();
};

const init = async () => {
  factoryId.value = props.factoryId;
  await initData();
  await mapReload();
  mapRef.value.addPosition(positions);
};
init();
</script>

<template>
  <div id="lay-container">
    <div class="left">
      <div class="header">
        <h1 style="color: #fff">{{ factoryName }}</h1>
        <el-tag>污水处理达标率 {{ (passing * 1000).toFixed(2) }}%</el-tag>
      </div>
      <div class="charts">
        <div class="chart-item">
          <panel title="设备列表">
            <device-list :devices="deviceList"></device-list>
          </panel>
        </div>
        <div class="chart-item">
          <panel title="污水处理量">
            <amount-chart
              v-if="isWaterSonActive"
              :amount="amountArr"
            ></amount-chart>
          </panel>
        </div>
        <div class="chart-item">
          <panel title="加药量">
            <amount-chart
              v-if="isWaterSonActive"
              :amount="dosageArr"
            ></amount-chart>
          </panel>
        </div>
        <div class="chart-item">
          <panel title="污染物分析">
            <div class="quality-items">
              <quality-chart
                class="quality-chart"
                v-for="item in qualityArr"
                :key="item.key"
                typeOf="foul"
                :contentKey="item.key"
                :contentName="item.name"
                :contentValue="item.value"
              ></quality-chart>
            </div>
          </panel>
        </div>
      </div>
    </div>
    <div class="right">
      <manage-map
        v-if="isMapSonActive"
        :zoom="14"
        :center="geoCenter"
        ref="mapRef"
      ></manage-map>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#lay-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    height: 100%;
    width: 60%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    background-color: rgba(29, 43, 86, 1);
    .header {
      margin: 0 auto;
      display: flex;
      align-items: center;
      .el-tag {
        height: 30px;
        width: 200px;
        font-size: 16px;
        margin: auto 15px;
      }
    }
    .info {
      width: 100%;
      margin-top: 3%;
    }
    .charts {
      width: 100%;
      height: 90%;
      margin-top: 3%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .chart-item {
        width: 48%;
        height: 48%;
        h3 {
          font-size: 20px;
          font-weight: normal;
          font-style: normal;
          color: rgb(245, 172, 100);
        }
        .quality-items {
          width: 100%;
          height: 90%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding: 0;
          .quality-chart {
            width: 33%;
            height: 46%;
          }
        }
      }
    }
  }
  .right {
    height: 100%;
    width: 40%;
  }
}
</style>